<template>
	<view class="web_bg">
		<cu-custom bgColor="bg-gradual-green">
			<template #content>
				<text>我的</text>
			</template>
		</cu-custom>
		<view class="light bg-olive myInfo">
			<view class="myInfo-left">
				<view class='cu-avatar round xl'>
					<image :src="baseUrl+userInfo.avatar" class="cu-avatar round xl" @click="openAvatar" />
				</view>
				<view class="titleBox">
					<view>
						<text>{{userInfo.nickName}}</text>
						<text class="cuIcon-write eidtAvatar"></text>
					</view>
					<view class="conent">{{userInfo.remark}}</view>
				</view>
			</view>
			<view class="text-xxl">
				<text class="cuIcon-settings" @click="goSetting"></text>
			</view>
		</view>
		<view class="myOptionBox">
			<view class="grid col-4 grid-square myOption">
				<view class="bg-img" v-for="(item,index) in avatar" :key="index"
					:style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
			</view>
		</view>
		<view class="cu-list menu sm-border card-menu cardBox">
			<view class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">图标 + 标题</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">图标 + 标题</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">图标 + 标题</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">图标 + 标题</text>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green"></view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="cu-list menu sm-border card-menu">
					<view class="cu-item">
						<view class="content">
							<image src="/static/logo.png" class="png" mode="aspectFit"></image>
							<text class="text-grey">相册</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<image src="/static/logo.png" class="png" mode="aspectFit"></image>
							<text class="text-grey">拍照</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getUserInfo
	} from "@/utils/api.js"
	let avatar = ref(['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
	])
	//用户信息
	let userInfo = ref({})
	//前缀地址
	let baseUrl = ref(getApp().globalData.baseUrl)
	//弹窗
	let modalName = ref(null)
	onMounted(() => {
		getUserInfoFun()
	})
	//获取用户信息
	let getUserInfoFun = () => {
		getUserInfo().then(res => {
			console.log("用户信息", res)
			userInfo.value = res.data
			console.log("头像地址", baseUrl.value + userInfo.value.avatar)
		})
	}
	//去往设置
	let goSetting = () => {
		uni.navigateTo({
			url: "/pages/my/setting/setting"
		})
	}
	//打开弹窗
	let openAvatar = () => {
		modalName.value = "bottomModal"
	}
	//弹窗取消
	let hideModal = () => {
		modalName.value = null
	}
</script>

<style scoped>
	.web_bg {
		height: 100%;
		background: #ecf0f1;
	}

	.myInfo {
		height: 300upx;
		display: flex;
		align-items: center;
		padding: 0 40upx;
		justify-content: space-between;
	}

	.myInfo-left {
		display: flex;
		align-items: center;
	}

	.eidtAvatar {
		margin-left: 40upx;
		font-size: 30upx;
	}

	.myOptionBox {
		padding: 0 30upx;
		margin-top: -40upx;
	}

	.myOption {
		background: #fff;
		padding: 40upx 20upx 15upx;
		border-radius: 15upx;
	}

	.titleBox {
		margin-left: 20upx;
		font-size: 40upx;
		font-weight: bold;
	}

	.conent {
		font-size: 20upx;
		margin-top: 10upx;
		color: #c7c7c7;
		font-weight: normal;
	}

	.cardBox {
		margin-top: 40upx;
	}
</style>